<template>
  <div>
      <el-card>
          <h3>管理上传</h3>
      </el-card>
      <el-card>
          <div>
              <el-form :inline="true" :model="Upline">
                  <el-form-item label="上传用户:">
                      <el-input v-model="Upline.UpUser" placeholder="用户ID/账号" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="文件名:">
                      <el-input v-model="Upline.FileName" placeholder="用户ID/账号" clearable></el-input>
                  </el-form-item>
                  <el-form-item>
                      <el-button type="primary" @click="QueryFile()">查询</el-button>
                  </el-form-item>
                  <el-form-item>
                      <el-button @click="Resetting">重置</el-button>
                  </el-form-item>
                  <!-- <el-form-item>
                      <el-button type="info" @click="FileUploads">文件上传</el-button>
                  </el-form-item> -->
              </el-form>
          </div>
          <el-table :data="TemplateList.records" style="width: 100%">
              <el-table-column prop="createDate" label="日期">
              </el-table-column>
              <el-table-column prop="username" label="账号">
              </el-table-column>
              <el-table-column prop="modelKey" label="模型标识key">
              </el-table-column>
              <el-table-column prop="taskId" label="taskId">
              </el-table-column>
              <el-table-column label="操作">
                  <template slot-scope="scope">
                      <el-button type="text" icon="el-icon-download" plain @click="DownFile(scope.row)"
                          size="mini">下载</el-button>
                          <el-button type="text" icon="el-icon-upload2" plain @click="FileUploads(scope.row)"
                          size="mini">上传</el-button>
                  </template>
              </el-table-column>
          </el-table>

          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :page-sizes="[10, 50, 100, 1000]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
              :total="TemplateList.total" style="margin: 20px 0;float: right;">
          </el-pagination>


          <!-- 文件上传 -->

          <el-dialog title="文件上传" :visible.sync="UpFileDialog" width="420px">
              <div>

                  <el-form :inline="true" :model="formInline" class="demo-form-inline">
                      

                      <el-form-item label="文件">
                          <el-upload class="upload-demo" drag ref="uploadKUser" :http-request="onUploadKUser"
                              action="" :on-preview="handlePreviewKUser" :on-remove="handleRemoveKUser"
                              :file-list="fileListKUser" :on-change="handleFileChange" :on-success="uploadSuccess"
                              :multiple="true" :auto-upload="false" accept="" :limit="50" :on-exceed="OnExceedKUser">
                              <i class="el-icon-upload"></i>
                              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                          </el-upload>
                      </el-form-item>
                  </el-form>



              </div>
              <span slot="footer" class="dialog-footer">
                  <el-button @click="CancelFiles">取消上传</el-button>
                  <el-button type="primary" @click="Determine">确定上传</el-button>
              </span>
          </el-dialog>

          <!-- 文还上传 -->
      </el-card>
  </div>
</template>

<script>
import { AdminUserFiles, UpUserFiles, QueryModelkey ,UserUploadfile} from '@/api/table'
import request from '../../../../vue.config'

export default {
  data() {
      return {
          TemplateList: [],
          UpFileDialog: false,
          Upline: {
              UpUser: '',
              FileName: ''
          },
          formInline:{
              RechargeType:""
          },
          pageCode: 1,
          pageSize: 10,
          fileListKUser: [],
          pageCode: 1,
          pageSize: 10,
          CsvRole: '',
          timestamp: '',
          RequestUrl: '',
          modelKey: [],
          ModelKeyOne:''
      };
  },
  created() {
      this.QueryFile()
      console.log(this.timestamp, "wenjain")
      this.CsvRole = localStorage.getItem('CsvRole');
      this.RequestUrl = request.devServer.proxy["/api"].target
      this.QueryModel()
  },
  methods: {
      async QueryModel() {
          QueryModelkey().then(res => {
              this.modelKey = res.data
              console.log(this.modelKey, "wenjain")
          })
      },
      DownFile(row) {
          // localhost:8081/datac/business/file/download?taskId=20240712f97292a7140747e78200cc2e
          const DownUrl = this.RequestUrl + `/datac/business/file/download?taskId=${row.taskId}`
          window.open(DownUrl, '_blank')
      },

      // 查询文件
      async QueryFile() {
          UserUploadfile(this.pageCode, this.pageSize).then(res => {
              this.TemplateList = res.data
          })
      },

      // 清空每一项的值
      clearObject(obj) {
          for (let key in obj) {
              if (obj.hasOwnProperty(key)) {
                  obj[key] = '';
              }
          }
      },


      // 文件上传
      FileUploads(row) {
          this.UpFileDialog = true;
          this.ModelKeyOne = row.taskId
      },

      async onUploadKUser(file) {
          // let taskId = this.CsvRole + `_` + this.timestamp;
          const formData = new FormData()
          formData.append("file", file.file);
          formData.append("taskId", this.ModelKeyOne);
          let UpFiles = await AdminUserFiles(formData);

          // console.log(formData,"wenjain1")
      },
      // 确定上传
      Determine() {
          this.$refs.uploadKUser.submit();
          this.UpFileDialog = false;

      },
      // 取消上传清空文件
      CancelFiles() {
          this.UpFileDialog = false;
          this.$refs.uploadKUser.clearFiles();
      },
      // 点击文件列表中已上传的文件时的钩子
      handlePreviewKUser(file) {
          console.log(file, "1");
      },
      // 	文件列表移除文件时的钩子
      handleRemoveKUser(file, fileList) {
          console.log(file, fileList, "文件列表移除文件时的钩子");
          // const arr = []
          // for (let i = 0; i < this.fileListKUser.length; i++) {
          //     if (this.fileListKUser[i].uid !== file.uid) {
          //         arr.push(this.fileListKUser[i])
          //     }
          // }
          // this.fileListKUser = arr
          // console.log(this.fileListKUser, "this.fileListKUser")
      },
      // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
      handleFileChange(file, fileList) {
          // this.fileListKUser = fileList
          console.log(file, fileList, "this.fileListKUser")
          // this.fileListKUser.push(file)
          // const arr1 = this.fileListKUser.concat(fileList);
          // console.log(this.fileListKUser, "this.fileListKUser")
          // this.fileListKUser = arr1
          // this.fileListKUser.push(...fileList);

      },
      // 上传成功
      uploadSuccess(response, file, fileList) {
          console.log('上传成功')
      },
      OnExceedKUser() {
          this.$message({
              message: "文件上传超出限制",
              type: 'error'
          });
      },


      // 重置
      Resetting() {
          this.clearObject(this.Upline)
      },
      // 分页
      async handleSizeChange(val) {
          this.pageSize = val;
      },
      async handleCurrentChange(val) {
          this.pageCode = val;

      },

      async handleSizeChange(val) {
          this.pageSize = val;
          this.QueryFile()
      },
      async handleCurrentChange(val) {
          this.pageCode = val;
          this.QueryFile()

      },
  },
};
</script>

<style lang="scss" scoped></style>